<template>
  <div id="agreement">
    <h1 class="con-right-title">
      协议管理
    </h1>
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:agreement:add'"
        type="warning"
        icon="el-icon-plus"
        @click="handelAddEdit('add')"
      >
        添加协议
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%;"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="协议版本号"
        prop="version"
        min-width="90"
      ></el-table-column>
      <el-table-column label="类型" prop="status" min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.type">
            {{ scope.row.type | filterName('protocol_type') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        min-width="160"
      ></el-table-column>
      <el-table-column
        label="创建人"
        prop="createUserName"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="修改时间"
        prop="lastModifitionTime"
        min-width="160"
      ></el-table-column>
      <el-table-column
        label="修改人"
        prop="lastModificationUserName"
        min-width="100"
      ></el-table-column>
      <el-table-column
        v-permission="'wh:agreement:status'"
        label="启用状态"
        prop="displayed"
        width="80"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.displayed"
            :active-value="true"
            :inactive-value="false"
            active-color="#1DC8A4"
            @change="
              changeStatus(scope.row.displayed, scope.row.id, scope.$index)
            "
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="启用时间"
        prop="effectiveTime"
        min-width="160"
      ></el-table-column>
      <el-table-column label="展示端" prop="terminalType" min-width="110">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.terminalTypeList" :key="index">{{ item | filterName('protocol_terminal_type') }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="补充说明"
        prop="description"
        min-width="160"
      ></el-table-column>
      <el-table-column label="操作" width="135" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:agreement:check'"
            type="text"
            @click="handelAddEdit('check', scope.row)"
          >
            查看
          </el-button>
          <el-button
            v-permission="'wh:agreement:edit'"
            v-if="scope.row.displayed === false"
            type="text"
            @click="handelAddEdit('edit', scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:agreement:copy'"
            @click="handelAddEdit('copy', scope.row)"
          >
            复制
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!--添加弹窗 -->
    <addEditDialog
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></addEditDialog>
  </div>
</template>

<script>
import {
  getSearchList,
  stopApi,
  openApi
} from '@/api/agreementManagement/index' // 接口
import topSearch from '@component/agreementManagement/topSearch' // 上部搜索条件
import addEditDialog from '@component/agreementManagement/addEditDialog' // 添加弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'agreement',
  msg: '协议管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addEditDialog
  },
  data() {
    return {
      loading: false,
      total: 0, // 搜索条件
      formInline: {
        type: '', // 协议类型
        displayed: '', // 开启状态
        terminalType: '' // 排序
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: [],
      dialogData: {
        isShow: false, // 默认隐藏
        params: '', // 默认新增
        type: 'add' // 默认新增
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      /*   const params = {}
      Object.keys(this.formInline).forEach((key) => {
        if (this.formInline[key] !== '') {
          params[key] = this.formInline[key]
        }
      })
      let obj = Object.assign({}, this.searchParams, params)*/
      let obj = Object.assign({}, this.searchParams, this.formInline)
      /* obj.displayed = eval(obj.displayed)*/
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 打开弹窗
    handelAddEdit(type, params = {}) {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.params = params
    },
    // 状态切换提示
    async changeStatus(status, id, index) {
      if (status === false) {
        // 停用
        this.$confirm(`确定停用该协议吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            stopApi(
              id,
              (response) => {
                /*this.$message.success('操作成功！')*/
                this.searchList()
              },
              (response) => {
                this.tableData[index].displayed = true
                this.$message.warning(response.message)
              }
            )
          })
          .catch(() => {
            this.tableData[index].displayed = true
            /* this.$message({
               type: "info",
               message: "已取消停用"
              }); */
          })
      } else {
        // 启用
        openApi(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.tableData[index].displayed = false
            this.$message.warning(response.message)
          }
        )
      }
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less">
#agreement {
}
</style>
